import { Outlet } from 'react-router-dom'
// utils
import { MessageProvider } from './component/context/messageContext/message'
import { GlobalProvider } from './component/context/globalContext'
import { RouterBeforeEach } from './router/routerBeforeEach'
import { useEffect } from 'react'

function App() {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'F12') {
        if (process.env.REACT_APP_ENV === '') event.preventDefault()
        return false
      }
    }

    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
    }
  }, [])

  return (
    <MessageProvider>
      <GlobalProvider>
        <div style={{ width: '100vw', height: '100vh' }}>
          <RouterBeforeEach>
            <Outlet></Outlet>
          </RouterBeforeEach>
        </div>
      </GlobalProvider>
    </MessageProvider>
  )
}

export default App
